import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../actions/index'

class Home extends Component {

    state = {
        text: ''
    }

    componentDidMount() {
        this.props.get_List()
    }

    clickBtn(index) {
        this.props.clickBtn(index)
    }

    textBtn() {
        if(onkeydown === 13) {
            
        }
    }

    render() { 
        let { list } = this.props
        return (
            <div>
                <input onChange={e => e.target.value} onKeyUp={this.textBtn.bind(this)} />
                <div>
                    <h2>正在进行</h2>
                    {
                        list && list.length ? list.map((item,index) => {
                            return !item.flag && <div key={index}>
                                <input type='checkbox' checked={item.flag} onClick={
                                    this.clickBtn.bind(this, index)
                                }/>
                                <span>{item.title}</span>
                            </div>
                        }) : ''
                    }
                </div>
                <div>
                    <h2>已经完成</h2>
                    {
                        list && list.length ? list.map((item,index) => {
                            return item.flag && <div key={index}>
                                <input type='checkbox' checked={item.flag} onClick={
                                    this.clickBtn.bind(this, index)
                                }/>
                                <span>{item.title}</span>
                            </div>
                        }) : ''
                    }
                </div>
            </div>
        )
    }
}

let mapStateToProps = ({Reducer}) => {
    return {
        ...Reducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)
 
export default connect(mapStateToProps, mapDispatchToProps)(Home)